<template>
    <div>
        <a-modal
            title="选择使用物料"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="800"
            class="select-material-modal"
            :footer="null"
        >
            <div>
                <a-form layout="horizontal" class="add-edit-form">
                    <!-- <a-form-item label="使用量" required>
                        <a-input-number
                            style="width: 185px;"
                            :min="1"
                            :precision="0"
                            v-model:value="formState.fwlsysl"
                            placeholder="请输入使用量"
                        />
                    </a-form-item> -->
                    <!-- <a-form-item label="使用物料" required></a-form-item> -->
                    <div>
                        <commpVxeTable
                            :key="refreshTable"
                            :arrangeSearchNum="3"
                            :assembleWidth="752"
                            ref="headmanVxeTable"
                            :config="{
                                api:assessCheckApi.spcyQyInfoqueryWlmlPageList,
                                rowId: 'id',
                                paramet:{
                                    fqyid:formState.fqyid
                                }
                            }" 
                            :isCanWrap="true"
                            :columns="directoryColumnsVxe" 
                            :formItem="directoryFormItem"
                            :occupancyHeight="130"
                            @radioChange="commpVxeTableRadioChange"
                        > 
                            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                                <a-form layout="inline" class="search-form" >
                                    <a-form-item v-if="!formState.isDisabled">
                                        <a-button class="blue-btn" type="primary" @click="outboundClick(row)" >出库</a-button>
                                    </a-form-item>
                                </a-form> 
                            </template>
                        </commpVxeTable>
                    </div>
                </a-form>
                <a-modal v-model:visible="outboundVisible" title="使用物料数量" @ok="outboundHandleOk">
                    <a-form :form="form" layout="horizontal" class="add-edit-form">
                        <a-form-item label="使用量" required>
                            <a-input-number
                                style="width: 185px;"
                                :min="1"
                                :precision="0"
                                v-model:value="formState.fwlsysl"
                                placeholder="请输入使用量"
                            />
                        </a-form-item>
                    </a-form>
                </a-modal>
            </div>
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from '../service/api'
import {
    spcyQyInfoaddScjlWl,
} from '../service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fwlsysl: [{
                    required: true,
                    message: '请输入使用量',
                    trigger: 'blur',
                }],
            },
            assessCheckApi:assessCheckApi,
            outboundVisible:false,
            visible:false,
            refreshTable:null,
            formState:{},
            directoryFormItem:[{
                label: '物料名称',
                model: 'fwlmc',
            },{
                label: '物料编号',
                model: 'fwlbh',
            }],
            directoryColumnsVxe:[
            //     { 
            //     type: 'radio', 
            //     width: 60 ,
            //     fixed: 'left'
            // },
            {
                title: '物料编号',
                field: 'fwlbh',
            },{
                title: '物料名称',
                field: 'fwlmc',
            },{
                title: '物料名称',
                field: 'fwlmc',
            },{
                title: '通用名称',
                field: 'ftymc',
            },{
                title: '规格',
                field: 'fgg',
            },{
                title: '数量单位',
                field: 'fsldw',
            },{
                title: '库存数量',
                field: 'fkcsl',
            },{
                title: '库存数量',
                field: 'fkcsl',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:100,
                fixed:'right'
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log(row)
            this.formState = {}
            this.formState = row
            this.refreshTable = Date.now()
        },
        commpVxeTableRadioChange({row}){
            this.formState.fwlmlid = row.id
        },
        outboundClick(row){
            this.formState.fwlmlid = row.id
            this.outboundVisible = true
        },
        outboundHandleOk(){
            this.form.validateFields((err, values) => {
                if(!err){
                    spcyQyInfoaddScjlWl(this.formState).then(res=>{
                        if(res.code == 200){
                            this.$message.success(res.message)
                            this.$emit('productionSuccess')
                            this.outboundVisible = false
                            this.visible = false
                            
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        handleOk(){
            this.visible = false
        },
    }
}
</script>
<style lang="less">
.select-material-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            width: 100%;
            display: flex;
            margin-bottom: 5px;
        }
        .ant-form-item-label{
            width: 100px;
        }
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
}

</style>